<template>
  <div class="login">
    <el-form
      ref="formDom"
      class="loginForm"
      :model="form"
      :rules="rules"
      label-width="80px"
      label-position="top"
    >
      <el-form-item
        label="手机号"
        prop="phone"
      >
        <el-input v-model="form.phone" />
      </el-form-item>
      <el-form-item
        label="密码"
        prop="password"
      >
        <el-input
          v-model="form.password"
          type="password"
        />
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          class="login-btn"
          :loading="loginButLading"
          @click="login"
        >
          登陆
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts">
import { ElMessage } from 'element-plus'
import { defineComponent, reactive, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useStore } from 'vuex'
import { loginApi } from '/@/services/user'
interface formType {
  phone: number | null
  password: string | number | null
}
// 初始化form表单数据
const initForm = () => {
  const form: formType = reactive({
    phone: 15510792995,
    password: null
  })
  return {
    form
  }
}
const useFormValidate = () => {
  const formDom = ref()
  const rules = {
    phone: [
      { required: true, message: '请输入手机号', trigger: 'blur' },
      { pattern: /^1\d{10}$/, message: '请输入正确的手机号', trigger: 'blur' }
    ],
    password: [
      { required: true, message: '请输入密码', trigger: 'blur' }
    ]
  }
  const validate = async () => {
    let result = false
    await formDom.value.validate((v: boolean) => { result = v })
    return result
  }
  return {
    formDom,
    rules,
    validate
  }
}
// 登陆
const useLogin = (form: formType, validate?: ()=>Promise<boolean>) => {
  const router = useRouter()
  const route = useRoute()
  const store = useStore()
  const loginButLading = ref(false)
  const login = async () => {
    if (validate && !(await validate())) return
    loginButLading.value = true
    // let isValidate = validate ? await validate() : true
    // validate(r=> {
    //   console.log(r)
    // })
    // console.log(isValidate)
    const { data } = await loginApi(form)
    if (data?.success) {
      store.commit('setUser', data.content)
      ElMessage.success('登陆成功')
      router.push((route.query?.redirect as string) || '/')
    } else {
      ElMessage.error(data?.message || '登陆失败')
    }
    loginButLading.value = false
  }
  return {
    login,
    loginButLading
  }
}
export default defineComponent({
  name: 'LoginIndex',
  setup () {
    const initFormData = initForm()
    const validate = useFormValidate()
    return {
      ...initFormData,
      ...validate,
      ...useLogin(initFormData.form, validate.validate)

    }
  }
})
</script>

<style lang="scss" scoped>
  .login {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    .loginForm {
      background: #FFF;
      padding: 20px;
      border-radius: 5px;
      width: 300px;
      .login-btn {
        width: 100%;
      }
    }
  }
</style>
